<template>
	<view class="avatar" 
		:class="styleClass"
		:style="style"
	>
		<view class="avatar__warp">
			<image :src="props.src"></image>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
	
const props = defineProps({
	src: {
		type: String
	},
	size: {
		type: String,
		default: '40'
	},
	shape: {
		type: String,
		default: 'square'
	}
})

const style = computed(() => {
	return {
		...(props.size ? {'width': props.size + 'rpx', 'height': props.size + 'rpx'} : {})
	}
})

const styleClass = computed(() => {
	return {
		[`avatar--${props.shape}`] : props.shape
	}
}) 
</script>

<style lang="less" scoped>
	@import './style/index.less';
</style>